<template>
  <div class="pic-list">
    <div class="m10 clearfix">
      <Button type="info" class="fr" @click="showCreateModal()">新增积分商品</Button>
    </div>

    <div v-if="goods && goods.length > 0">
      <div class="clearfix">
        <Card class="pic" v-for="(item, index) in goods" :key="index">
          <div>
              <div class="image-wrapper"
                v-if="item.photoPath"
                @click="showDetailModal(item)"
                :style="{ backgroundImage: 'url(' + splitImg(item.photoPath)[0].url + ')' }">
              </div>
              <div v-else class="image-wrapper" @click="showDetailModal(item)"></div>
              <Form label-position="left" :label-width="80" class="mt20">
                <FormItem label="兑换商品:">{{ item.srvProName }}</FormItem>
                <FormItem label="兑换积分:">{{ item.needScore }}分</FormItem>
                <FormItem label="剩余数量:">{{ item.totalCount }}份</FormItem>
                <FormItem label="兑换总数:">{{ item.usedCount }}份</FormItem>
              </Form>
          </div>
          <div class="handler">
            <span @click="showDetailModal(item)"><Icon type="ios-eye"></Icon></span>
            <span @click="showUpdateModal(item)"><Icon type="edit"></Icon></span>
          </div>
        </Card>
      </div>

      <div class="m10 clearfix" v-if="page.total > 0">
        <div class="fr">
          <Page
            show-total
            :total="page.total"
            :current="query.currentPage"
            @on-change="onChangePage">
          </Page>
        </div>
      </div>
    </div>
    <div v-else class="empty-con">
      <i></i>
      <p>该筛选条件下没有任何内容</p>
    </div>

    <update-goods-modal :form="form" @submit="getList"></update-goods-modal>
    <detail-goods-modal :form="detailForm"></detail-goods-modal>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { mapGetters } from 'vuex'
  import vipApi from '@/api/vip'
  import updateGoodsModal from './update-goods-modal'
  import detailGoodsModal from './detail-goods-modal'

  export default {
    name: 'goods-list',
    components: {
      updateGoodsModal,
      detailGoodsModal
    },
    data () {
      return {
        loading: false,
        query: {
          srvProName: '',
          pkRcId: null,
          currentPage: 1,
          limit: 10
        },
        page: {
          total: 0
        },
        goods: [],
        form: {
          visible: false,
          data: {},
          template: {
            needScore: 0,
            totalCount: 0
          }
        },
        detailForm: {
          visible: false,
          data: {},
          template: {}
        }
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    watch: {
      'query.currentPage': 'getList'
    },
    methods: {
      splitImg (str) {
        return Vue.filter('splitImg')(str || '')
      },
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      async getList () {
        this.loading = true
        this.query.pkRcId = this.userInfo.pkRclubInfo
        const { body } = await vipApi.goodsList(this.query)
        const { responseData } = body
        this.loading = false
        this.goods = responseData.content
        this.page.total = responseData.totalElements
      },
      showCreateModal () {
        this.form.data = Object.assign({}, this.form.template)
        this.form.visible = true
      },
      showDetailModal (detail) {
        this.detailForm.data = Object.assign({}, detail)
        this.detailForm.visible = true
      },
      showUpdateModal (detail) {
        this.form.data = Object.assign({}, detail)
        this.form.visible = true
      }
    },
    mounted () {
      this.$store.dispatch('getUserInfo')
      this.getList()
    }
  }
</script>

<style lang="less">
  #page-score-exchange {
    .image-wrapper {
      height: 200px;
      background: #ccc;
      background-size: cover;
    }

    .pic {
      .handler {
        position: absolute;
        right: 10px;
        bottom: 10px;
        display: none;
        .ivu-icon {
          margin-right: 10px;
          cursor: pointer
        }
      }

      &:hover .handler {
        display: block
      }
    }

    .ivu-form-item {
      margin-bottom: 0px;
      padding-left: 5px;
    }
  }
</style>
